import { useEffect, useState } from 'react'
import { useSearchParams, useNavigate, } from 'react-router-dom'
import axios from '../utils/axios'
import { Card, Button, List, Space, Typography, Avatar } from 'antd'
import { LeftOutlined, EyeOutlined, CalendarOutlined } from '@ant-design/icons'
import type { Comments, Reply } from '../Type'
const { Text } = Typography;
const ArticleDetail = () => {
	const [qs] = useSearchParams()
	const navigate = useNavigate()
	const id = qs.get('id')
	const [detailData, setDetailData] = useState<any>([])
	const getDetaData = async () => {
		const res = await axios.get(`/article/${id}`)
		console.log(res)
		const { status, data } = res
		if (status === 200) {
			setDetailData(data)
		}
	}
	useEffect(() => {
		getDetaData()
	}, [])
	console.log(detailData)
	return (
		<div>
			<Card title={<Button onClick={() => navigate('/message')}><LeftOutlined />返回列表</Button>} style={{ width: '100%' }}>
				<h1>{detailData.title}</h1>
				<div style={{ display: 'flex', width: 320, justifyContent: "space-between", marginTop: 10, alignItems: 'center' }}>
					<div><EyeOutlined /> <span style={{ marginLeft: 10 }}>{detailData.viewCount}次阅读</span></div>
					<div><CalendarOutlined /><span style={{ marginLeft: 10 }}>创建时间：&nbsp;{detailData.createdAt}</span></div>
				</div>
				<p style={{ lineHeight: 5 }}>{detailData.content}</p>
			</Card>
			<Card title={`评论(${detailData.comments?.length})`}>
				{detailData.comments?.length === 0 ? <div>暂无评论</div> : (
					<>
						{detailData.comments?.map((RootComments: Comments) => {
							// console.log(RootComments)
							// 递归渲染 评论
							const randerComment = (item: Comments | Reply) => {
								console.log(item)
								return (
									<List itemLayout="vertical" >
										<List.Item extra={<a>回复</a>}>
											<List.Item.Meta
												avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg`} />}
												title={
													<Space>
														<Text strong>{item.user.username}</Text>
														<Text type="secondary" style={{ fontSize: "14px" }}>
															{item.createdAt}
														</Text>
													</Space>
												}
												description={<>{item.content}</>}
											/>
											{item.replies?.length && (
												<>
													<List size="small"
														dataSource={item.replies}
														renderItem={(item: Reply) => randerComment(item)}
													>
													</List>
												</>
											)}
										</List.Item>
									</List>
								)
							}
							return randerComment(RootComments)
						})}
					</>
				)}
			</Card>
		</div>
	)
}
export default ArticleDetail